<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img :src="pageImgArr.pic01" alt="">
        <img id="share" @click="shareForWechat" v-lazy="pageImgArr.pic09" alt="">
      </div>
    </div>
    <div class="relative nav" :class="{'fixed':scrollFixed}">
      <img v-lazy="pageImgArr.pic02" alt="">
      <div class="width_50_1" @click="getGoodsAction('forBoys')"></div>
      <div class="width_50_2" @click="getGoodsAction('forGirls')"></div>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon" ></div>

    <div class="module" 
      :style="{'background':pageStyle=='forBoys'?'#ED2611':'#0E1C94'}"
      v-for="(item,index) in pageGoodsIdArr" :key="index"
    >
      <div class="module-title"><img v-lazy="item.moduleTitle" alt=""></div>
      <div class="module-content" :style="{'background':pageStyle=='forBoys'?'#0E1C94':'#ED2611'}">
        <div class="top">
          <div class="left">
            <div class="list" v-for="(subItem,index) in item.moduleData.slice(0,4)" :key="index" @click="goForGoodsDetail(subItem.goods_id)">
              <img :src="subItem.img640_url" alt="">
              <span class="index">{{index+1}}</span>
            </div>
          </div>
          <div class="right">
            <div class="list" v-for="(tabItem,index) in item.moduleData.slice(0,4)" :key="index" @click="goForGoodsDetail(tabItem.goods_id)">
              <div class="price">￥{{tabItem.flash_price}}</div>
              <div class="name">{{tabItem.goods_name}}</div>
              <span class="index">{{index+1}}</span>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="wrapper" :style="{'width':5*2.04+'rem'}">
            <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in item.moduleData.slice(4)" :key="index"/>
          </div>
        </div>
      </div>
    </div>
    <div class="more" :style="{'background':pageStyle=='forBoys'?'#ED2611':'#0E1C94'}">
      <div class="more-title">#更多潮流单品#</div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import GoodsItem from 'components/GoodsItems/item05.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{GoodsItem,SpecialItem},
    data(){
      return{
        isMaskLayer:false,//是否分享覆盖
        pageImgArr:{},
        scrollFixed:false,//是否固定tab
        pageStyle:'forBoys',//默认tab1
        pageGoodsIds:{
          forBoys:[
            1583259,1583199,1583529,1583531,1583533,1583527,1583201,1583211,1583213,1583261,1583263,1583265,1583307,1583309,
            1583217,1583219,1583221,1583223,1583203,1583205,1583193,1583197,1583189,1583191,1583207,1583195,1583215,1583209,
            1581677,1581687,1581689,1581685,1581683,1581697,1581681,1581695,1581693,1581691,1581679,1581941,1581943,1581945
          ],
          forGirls:[
            1587581,1583237,1583269,1583383,1583251,1583253,1583271,1583273,1583275,1583381,1583379,1583377,1583375,1583373,
            1583257,1583243,1583245,1583225,1583227,1583229,1583239,1583241,1583231,1583233,1583235,1583247,1583249,1583255,
            1580949,1580953,1580929,1580941,1580943,1580927,1580947,1580945,1580957,1580955,1581933,1581935,1581937,1581939
          ]
        },
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'69907,69881,69909,69889,69883,69739,69867,69835,69719,69715,69825,69839,69821,69841,69561,69807,69809,69813,69587,69817,69819,69823,69827,69829',
          specialArrList:[]
        }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      window.onscroll = function() {
        let tabLimitDis = that.$refs.abandon.offsetTop;
        let pageTop = window.scrollY;
        if (pageTop >= tabLimitDis) { that.scrollFixed=true;} 
        else {that.scrollFixed=false;}
      };
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/loverDay/loverDay01.jpg'),
          pic02:require('../../../assets/img/loverDay/loverDay02.jpg'),
          pic09:require('../../../assets/img/loverDay/loverDay09.png')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(style){
        if(this.pageStyle==style){ return false}
        this.pageGoodsIdArr=[];
        this.pageStyle=arguments[0]?arguments[0]:'forBoys';
        let param=this.pageGoodsIds[this.pageStyle].toString();
        getGoodsListApi(param).then(res =>{
          let baseImgIdx= this.pageStyle=='forBoys'? 6 :3;
          let tempData=[{},{},{}];
          tempData.forEach((item,index) =>{
            let formIdx=index*14,toIdx=(index+1)*14;
            item.moduleTitle = require(`../../../assets/img/loverDay/loverDay0${baseImgIdx+index}.jpg`);
            item.moduleData= res.data.slice(formIdx,toIdx);
          });
          this.pageGoodsIdArr=tempData;
        })
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1rem;
    height: 0.45rem;
    position: absolute;
    top: 0.2rem;right: 0;
  }
  .remix-goods{
    width: 2.25rem;
    height: 2.23rem;
    position: absolute;
    overflow: hidden;
    top: 0.08rem;right: 1.3rem;
    &.remix01{top: 0.35rem;}
    &.remix03{top: 1rem;left: 1.3rem;}
    &.remix04{top: 0.09rem;left: 1.3rem;}
  }
}
.nav{
  width: 100%;
  height: 0.8rem;
  overflow: hidden;
  position: relative;
  div[class*='width']{
    width: 35%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    &.width_50_2{left: 65%;}
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:0.8rem;background: #F62E17; }
.module{
  padding: 0.15rem 0.15rem 0;
  overflow: hidden;
  .module-content{
    padding: 0.11rem 0.22rem;
    .top{
      display: flex;
      .left{
        width: 3.92rem;
        display: flex;
        flex-wrap: wrap;
        .list{
          position: relative;
          width: 1.9rem;
          height: 1.9rem;
          margin: 0 0.12rem 0.12rem 0;
          &:nth-child(2n){margin-right: 0;}
          img{
            width: 1.9rem;
            height: 1.9rem;
            vertical-align: top;
          }
          .index{
            width: 0.24rem;
            height: 0.24rem;
            color: #333;
            line-height: 0.24rem;
            font-size: 0.2rem;
            text-align: center;
            position: absolute;
            top: 0.06rem;left: 0.1rem;
            border-radius: 50%;
            border: 0.02rem solid #333;
          }
        }
      }
      .right{
        width:2.7rem;
        margin-left: 0.12rem;
        font-size:0.3rem;
        .list{
          height: 0.87rem;
          padding: 0 0.1rem;
          text-align: center;
          color: #ffffff;
          background: #2258D6;
          margin-bottom: 0.14rem;
          position: relative;
          .price{
            line-height: 0.45rem;
            font-size: 0.32rem;
          }
          .name{
            height: 0.4rem;
            line-height: 0.4rem;
            overflow: hidden;
            font-size: 0.24rem;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .index{
            width: 0.24rem;
            height: 0.24rem;
            line-height: 0.24rem;
            font-size: 0.2rem;
            position: absolute;
            top: 0.06rem;left: 0.1rem;
            border-radius: 50%;
            border: 0.02rem solid #fff;
          }
        }
      }
    }
    .bottom{
      width: 7rem;
      overflow-y: hidden;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      .wrapper{
        display: flex;
        flex-wrap: wrap;
      } 
      .wrapper::-webkit-scrollbar {width:0px;height:0px;}
    }
  }
}
.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more-title{
  line-height: 0.75rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  font-weight: 600;
}
.more {
  .special {position: relative;}
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #666;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>